<template>
    <div class="box">
        <van-notice-bar
                left-icon="volume-o"
                :text="fwarticle.title"
                color="#e71500"
                background="#fff"
                @click="showFwarticle"
        />
        <template>
            <van-form @submit="onSubmit">
                <template v-if="addedoption.indexOf('1') != -1">
                    <div class="title">请上传您近一个月内免冠彩色半身电子照片，照片不能做任何修饰（比如滤镜、美颜之类的处理）</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader :max-count="1" v-model="mgphoto" :after-read="setMgphoto"
                                          :delete="delMgphoto"/>
                        </template>
                    </van-field>
                </template>

                <template v-if="addedoption.indexOf('2') != -1">
                    <div class="title">请上传您身份证正面照，照片必须是清晰可辨的彩色原件电子版（扫描件或者数码拍摄照片）</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader :max-count="1" v-model="IDfrontphoto" :after-read="setIDfrontphoto"
                                          :delete="delIDfrontphoto"/>
                        </template>
                    </van-field>
                </template>

                <template v-if="addedoption.indexOf('3') != -1">
                    <div class="title">请上传您身份证背面照，照片必须是清晰可辨的彩色原件电子版（扫描件或者数码拍摄照片）</div>
                    <van-field name="uploader">
                        <template #input>
                            <van-uploader :max-count="1" v-model="IDbackphoto" :after-read="setIDbackphoto"
                                          :delete="delIDbackphoto"/>
                        </template>
                    </van-field>
                </template>

                <template v-if="addedoption.indexOf('4') != -1">
                    <div class="title">请如实填写您本人联系电话号码，电话号码必须是使用您本人身份信息所办理</div>
                    <van-field
                            v-model="mobile"
                            name="mobile"
                            placeholder="电话号码"
                    />
                </template>

                <template v-if="addedoption.indexOf('5') != -1">
                    <div class="title">请如实填写您用本人信息所注册的邮箱账号，便于我们能及时联系您</div>
                    <van-field
                            v-model="email"
                            name="email"
                            placeholder="邮箱账号"
                    />
                </template>

                <template v-if="addedoption.indexOf('6') != -1">
                    <div class="title">请如实填写您用本人信息所注册的支付宝账号，便于我们能及时准确的转账到您的账户</div>
                    <van-field
                            v-model="zfbacount"
                            name="zfbacount"
                            placeholder="支付宝账号"
                    />
                </template>

                <template
                        v-if="addedoption.indexOf('7') != -1  || addedoption.indexOf('8') != -1 || addedoption.indexOf('9') != -1">
                    <div class="title">请如实填写您用本人信息所办理的银行卡账号，便于我们能及时准确的转账到您的账户</div>
                </template>
                <template v-if="addedoption.indexOf('9') != -1">
                    <van-field
                            v-model="realname"
                            name="realname"
                            label="开户人姓名"
                            placeholder="姓名"
                    />
                </template>
                <template v-if="addedoption.indexOf('8') != -1">
                    <van-field
                            v-model="bankname"
                            name="bankname"
                            label="银行名称"
                            placeholder="名称"
                    />
                </template>
                <template v-if="addedoption.indexOf('7') != -1">
                    <van-field
                            v-model="bankcard"
                            name="bankcard"
                            label="银行卡号"
                            placeholder="卡号"
                    />
                </template>
                <template v-if="addedoption.indexOf('10') != -1">
                    <van-field
                            v-model="address"
                            name="address"
                            label="现居住地址"
                            placeholder="现居住地址"
                    />
                </template>
                <div style="margin: 16px;">
                    <van-button round block type="info" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </template>
    </div>
</template>

<script>
    export default {
        name: "tixianInfo",
        data() {
            return {
                type: false,
                checked: false,
                mgphoto: [],
                IDfrontphoto: [],
                IDbackphoto: [],
                mgphotoImg: '',
                IDfrontphotoImg: '',
                IDbackphotoImg: '',
                mobile: '',
                email: '',
                zfbacount: '',
                bankname: '',
                realname: '',
                bankcard: '',
                address: '',
                fwarticle: '',
                addedoption: []
            }
        },
        mounted() {
            document.body.style.backgroundColor = "#ffffff";
            if(this.$route.query.addedoption){
                this.addedoption = this.$route.query.addedoption.split(',');
            }
            this.fwarticle = JSON.parse(this.$route.query.fwarticle);
        },
        created() {
            this.getuserInfo();
        },
        beforeDestroy() {
            document.body.style.backgroundColor = "";
        },
        methods: {
            replacrImg(detailText) {
                detailText = detailText.replace(/<img[^>]*>/gi, function(match, capture) {
                    return match.replace(/(style="(.*?)")|(width="(.*?)")|(height="(.*?)")/ig,
                        'style="max-width:100%;height:auto;"') // 替换style
                });
                return detailText;
            },
            /* 显示内容 */
            showFwarticle(){
                this.fwarticle.content = this.replacrImg(this.fwarticle.content);
                this.$dialog.alert({
                    title: this.fwarticle.title,
                    message: this.fwarticle.content,
                    messageAlign: 'left'
                }).then(() => {
                });
            },
            /* 获取用户数据 */
            getuserInfo() {
                let that = this;
                that.request1.post1({
                    url: that.Url + "api/user.tixian/trueprofile",
                    params: {},
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.mgphotoImg = res.data.data.trueprofile.mgphoto;
                            that.IDfrontphotoImg = res.data.data.trueprofile.IDfrontphoto;
                            that.IDbackphotoImg = res.data.data.trueprofile.IDbackphoto;
                            that.mobile = res.data.data.trueprofile.mobile;
                            that.email = res.data.data.trueprofile.email;
                            that.zfbacount = res.data.data.trueprofile.zfbacount;
                            that.bankname = res.data.data.trueprofile.bankname;
                            that.bankcard = res.data.data.trueprofile.bankcard;
                            that.realname = res.data.data.trueprofile.realname;
                            that.address = res.data.data.trueprofile.address;
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg);
                    }
                })
            },
            onSubmit(val) {
                this.addedoption.map(item=>{
                   if(this.addedoption.indexOf(item) != -1){
                       switch (item) {
                           case '1':
                               if(this.mgphotoImg === '') return this.$toast('请上传您近一个月内免冠彩色半身电子照片');
                           break;
                           case '2':
                               if(this.IDfrontphotoImg === '') return this.$toast('请上传您身份证正面照');
                           break;
                           case '3':
                               if(this.IDbackphotoImg === '') return this.$toast('请上传您身份证背面照');
                           break;
                           case '4':
                               if(this.mobile === '') return this.$toast('本人联系电话号码不能为空');
                           break;
                           case '5':
                               if(this.email === '') return this.$toast('邮箱不能为空');
                           break;
                           case '6':
                               if(this.zfbacount === '') return this.$toast('支付宝账号不能为空');
                           break;
                           case '7':
                               if(this.bankcard === '') return this.$toast('银行卡号不能为空');
                           break;
                           case '8':
                               if(this.bankname === '') return this.$toast('银行名称不能为空');
                           break;
                           case '9':
                               if(this.realname === '') return this.$toast('开户人姓名不能为空');
                           break;
                           case '10':
                               if(this.address === '') return this.$toast('地址不能为空');
                           break;
                       }
                   }
                });
                let that = this;
                that.request1.post1({
                    url: that.Url + "api/user.tixian/txprofileeditsave/",
                    params: {
                        mgphoto: that.mgphotoImg,
                        IDfrontphoto: that.IDfrontphotoImg,
                        IDbackphoto: that.IDbackphotoImg,
                        mobile: that.mobile,
                        email: that.email,
                        zfbacount: that.zfbacount,
                        bankname: that.bankname,
                        bankcard: that.bankcard,
                        realname: that.realname,
                        address: that.address,
                    },
                    success: function (res) {
                        if (res.data.code == 1) {
                            that.$toast({
                                message: '上传成功',
                                type: 'success',
                                duration: 1200,
                                onClose: () => {
                                    that.$router.go(-1);
                                }
                            });
                        } else {
                            alert(res.data.msg)
                        }
                    },
                    fail: function (error) {
                        alert(error.data.msg);
                    }
                })
            },
            delMgphoto() {
                console.log('是否触发');
                this.mgphotoImg = '';
            },
            delIDfrontphoto() {
                this.IDfrontphotoImg = '';
            },
            delIDbackphoto() {
                this.IDbackphotoImg = '';
            },
            //上传免冠
            setMgphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.mgphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
            //上传正面
            setIDfrontphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.IDfrontphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
            //上传背面
            setIDbackphoto(file) {
                file.status = 'uploading';
                file.message = '上传中';
                var that = this;
                let fd = new FormData();
                fd.append('file', file.file);

                that.$axios.post(
                    that.Url + "api/common/upload", fd, {}
                ).then(function (res) {
                    console.log(res)
                    if (res.data.code == 1) {
                        that.IDbackphotoImg = res.data.data.url;
                        file.status = 'done';
                        file.message = '上传成功';
                    } else {
                        file.status = 'failed';
                        file.message = '上传失败';
                        that.$toast(res.data.msg);
                    }
                }).catch(function (error) {
                    file.status = 'failed';
                    file.message = '上传失败';
                    that.$toast(error.data.msg);
                })
            },
        }
    }
</script>

<style scoped>
    .box {
        background-color: #fff;
    }

    .title {
        font-size: 12px;
        padding: 15px;
    }

    .table-box {
        margin: 100px 0 20px 0;
        display: flex;
        justify-content: center;
    }

    /deep/ .van-checkbox {
        align-items: flex-start;
    }
</style>